<template>
  <div class="math-container">
    <div class="math-item">{{problem.factorA}}</div>
    <div class="math-item type">{{problem.type}}</div>
    <div class="math-item">{{problem.factorB}}</div>
    <div class="math-item type">=</div>
    <div class="math-item answer">
      <el-input
        v-model="inputValue"
        placeholder="答案"
        class="input-with-select"
        @blur="checkAnswer(problem.result)"
      >
      </el-input>
    </div>
    <div class="math-item" :style="{display: showAnswer ? 'block' : 'none'}">{{problem.result}}</div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'random-item',
  props: { 
    data: { type: Object },
    show: { type: Boolean }
  },
  setup(props) {
    let inputValue = ref('');
    let checkResult = ref('');
    let problem = props.data;
    let showAnswer = props.show;
    const checkAnswer = (result) => {
      checkResult = result === parseInt(inputValue.value) ? '正确' : '错误';
    };
    return { ...problem, inputValue, checkResult, checkAnswer, ...showAnswer }
  }
}
</script>

<style>

</style>